<template>
	<view>
		<n-car :item="item"></n-car>
		<view class="pic-list">
			<view class="title">
				九视图：
			</view>
			<view class="list">
				<view class="item" v-for="(_item,i) in item.images" :key="i">
					<u-image @click="$tools.previewImg(item.images,i)" width="220" height="220" border-radius="8rpx"
						:src="_item"></u-image>
				</view>
			</view>
			<block v-if="item.car.video">
				<view class="title">
					车辆视频（打开所有车门，后备箱，绕车一周）
				</view>
				<video :src="item.car.video" :show-mute-btn="true"></video>
			</block>
		</view>
		<view class="info">
			<view class="order-status">
				<view class="">
					<view class="title-1">
						租车简介
					</view>
					<view class="desc">
						{{item.introduction}}
					</view>
				</view>
			</view>

			<view class="car-info">
				<view class=" mb-10">
					租车日期
				</view>
				<u-checkbox-group @change="checkGroupChange">
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkList" activeColor="#519D76"
						:key="index" :name="item" :disabled="item.disabled">{{item.label}}</u-checkbox>
				</u-checkbox-group>
				<view class="mt-20">
					<u-radio-group v-model="type" @change="radioGroupChange">
						<u-radio v-for="(item, index) in radioList" activeColor="#519D76" :key="index"
							:name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="item" v-if="type==1">
					<view class="title">
						接送地址
					</view>
					<view class="text" @click="openMap">
						<text class="pr-24">{{address || '请选择地址'}}</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="title">
						取车时间
					</view>
					<view class="text">
						<text class="pr-24">{{ item.qcsj }}:00</text>
					</view>
				</view>
				<view class="item">
					<view class="title">
						还车时间
					</view>
					<view class="text">
						<text class="pr-24">次日 {{ item.hcsj }}:00</text>
					</view>
				</view>
				
				<view class="item">
					<view class="title">
						押金：
					</view>
					<view class="text pr-24">
						￥{{item.deposit}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						租车费用：
					</view>
					<view class="text pr-24">
						￥{{item.price }}
					</view>
				</view>
				<view class="item">
					<view class="title">
						车辆地址：
					</view>
					<view class="text flex" @click="$tools.openMap(item.longitude,item.latitude)">
						<image class="icon-36 mr-20" src="../../static/icon-location1.png" mode=""></image>
						{{item.address}}
					</view>
				</view>
				<view class="item">
					<view class="title">
						开具发票
					</view>
					<view class="text">
						<u-radio-group v-model="invoiceValue">
							<u-radio @change="pickerInvoice" v-for="(item, index) in invoiceList" :key="index" 
							:name="item.value"
								activeColor="#519D76">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" v-if="invoiceValue==1">
					<view class="title">
						发票抬头
					</view>
					<view class="text" @click="$tools.to('/pages_message/myFp/myFp')">
						<text class="pr-20">{{fp_name || '请选择'}}</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
				<!-- <view class="item">
					<view class="title">
						小费
					</view>
					<u-input type="number" v-model="xf" height="30" inputAlign="right" placeholder="支持一下车主"></u-input>
				</view> -->
				<view class="item">
					<view class="title">
						用车简要说明
					</view>
				</view>
				<view class="textarea">
					<u-input type="textarea" v-model="ycjysm" :autoHeight="true" 
					placeholder="请填写用车简要说明(必填)"></u-input>
				</view>
				<view class="item">
					<view class="title">
						备注
					</view>
				</view>
				<view class="textarea">
					<u-input type="textarea" v-model="remarks" :autoHeight="true" placeholder="请填写备注"></u-input>
				</view>
			</view>
		</view>
		<view class="p-30">
			<u-alert-tips type="success" title="温馨提示" :description="description"></u-alert-tips>
		</view>
		<view class="payment">
			<!-- <view class="title-1">支付</view>
			<view class="list">
				<radio-group @change="selectPayType">
					<label class="cell flex-between" v-for="(item, index) in list" :key="index">
						<image class="icon-58" :src="item.icon" mode="widthFix"></image>
						<view class="flex-1 text-1">{{item.name}}</view>
						<view>
							<radio color="#519D76" :value="item.value" :checked="item.value === current" />
						</view>
					</label>
				</radio-group>
			</view> -->
		</view>
		<!-- 底部操作栏 -->
		<view class="btn-fixed">
			<view class="text-1">
				租车费用：<text>¥{{money}}</text>
			</view>
			<view class="btn" @click="payment">
				立即支付
			</view>
		</view>
		<u-select v-model="invoiceShow" :list="invoiceList" @confirm="pickerInvoice"></u-select>
		<n-popup ref="paymentSuccessShow" icon="https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20220822/8bf61cc40244d6382eef4c6084504d87.png" title="支付成功"
			desc="请等待车主确认，将通过系统消息通知您" @confirm="confirm"></n-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkShow: false,
				id: '',
				item: '',
				radioList: [{
						name: '上门服务',
						value: 1,
					},
					{
						name: '自取',
						value: 2,
					}
				],
				checkList: [],
				type: 1, //上门1 自取2
				curDate: [],
				longitude: '',
				latitude: '',
				address: '',
				tagList: [],
				page: 1,
				commentList: [],
				list: [{
						name: '微信支付',
						value: 'wechat_pay',
						icon: require('../../static/icon_wechatpay.png')
					},
					{
						name: '支付宝支付',
						value: 'ali_pay',
						icon: require('../../static/icon_alipay.png')
					},
				],
				status: 'loading', //loadmore loading / nomore
				money: 0,
				invoiceList: [{
						name: '本次不开具发票',
						value: 0
					},
					{
						name: '开具发票',
						value: 1
					}
				],
				invoiceShow: false,
				invoiceValue: 0,
				remarks: '',
				ycjysm:'',
				fp_id: '', //	发票idz
				fp_name: '', //	发票抬头
				bx: 0, //保险金额
				cf: 0, //车费
				xf: '', //小费
				bxInfo: null, //保险信息
				is_bx: false, //是否购买保险
				description:'',
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getDetail()
			this.getBx()
		},
		watch: {
			xf: function(val) {
				this.money = parseFloat(this.cf) + (parseFloat(this.xf) || 0) + Number(this.item.deposit)
				this.money = this.money.toFixed(2)
			},
			cf: function(val) {
				this.money = parseFloat(this.cf) + (parseFloat(this.xf) || 0) + Number(this.item.deposit)
				this.money = this.money.toFixed(2)
			},
		},
		methods: {
			getBx() {
				this.$api.getConfig({
					name: 'bxje'
				}).then(res => {
					if (res.code == 1) {
						this.bxInfo = res.data
					}
				})
				
				this.$api.getConfig({
					name: 'wxts'
				}).then(res => {
					if (res.code == 1) {
						this.description = res.data
					}
				})
			},
			// 计算服务距离
			getDistance(){
				let qdjd1 = this.item.longitude
				let qdwd1 = this.item.latitude
				let qdjd2 = this.longitude
				let qdwd2 =	this.latitude
				this.$api.getDistance({
					qd:`${qdjd1},${qdwd1}`,
					zd:`${qdjd2},${qdwd2}`,
				}).then(res=>{
					if(res.code==1){
						
					}else{
						this.address = ''
						this.latitude = ''
						this.longitude = ''
						this.$tools.toast(res.msg)
					}
				})
			},
			pickerInvoice(e) {
				this.invoiceValue = e
			},
			radioGroupChange(e) {
				console.log(e)
				this.type = e
			},
			checkGroupChange(e) {
				this.curDate = []
				this.cf = 0
				e.forEach(item => {
					this.cf += Number(item.value)
					this.curDate.push({
						date: item.name,
						price: item.value,
					})
				})
				this.cf = this.cf.toFixed(2)
				console.log(this.curDate)
				console.log(this.cf)
			},
			collect() {
				this.$api.collectionCarRental({
					car_rental_id: this.id
				}).then(res => {
					this.$tools.toast(res.msg)
					if (res.code == 1) {
						this.item.sc = !this.item.sc
					}
				})
			},
			getDetail() {
				this.$api.myCarRentalDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data
						this.money = Number(res.data.deposit)
						res.data.date.forEach((item, i) => {
							this.checkList.push({
								checked: false,
								name: `${item.date}`,
								value: `${item.price}`,
								label: `${item.date} ${item.price}元`,
								disabled: item.disabled,
							})
						})
						console.log(this.checkList)
						this.checkShow = true
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			payment() {
				if (this.curDate.length==0) {
					this.$tools.toast('请先选择租车日期')
					return
				}
				this.$api.carRentalCjzcdd({
					car_rental_id: this.id,
					zckssj: JSON.stringify(this.curDate),
					tcfs: this.type,
					zcfy: this.money,
					money: this.money,
					pay_type: 2,
					zcjd: this.longitude,
					zcwd: this.latitude,
					zcdd: this.address,
					ycjysm: this.ycjysm,
					cf: this.cf,
					is_invoice:this.invoiceValue,
					fp_id:this.fp_id,
				}).then(res => {
					if (res.code == 1) {
						// #ifdef APP-PLUS || H5
						// app支付宝支付
						this.$api.payAlipay({
							order_id: res.data.order_id
						}).then(orderInfo => {
							this.$tools.appAlipay(orderInfo.data).then(payInfo => {
								if (payInfo.errMsg == 'requestPayment:ok') {
									this.$refs.paymentSuccessShow.show = true
								} else {
									this.$tools.toast('支付失败')
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages_user/my_appointment/my_appointment'
										})
									}, 1000)
								}
							})
						})
						// #endif
						// #ifdef MP-WEIXIN
						this.$api.payMinipay({
							order_id: res.data.order_id
						}).then(orderInfo => {
							this.$tools.wechatMpPay(orderInfo.data).then(payInfo => {
								if (payInfo.errMsg == 'requestPayment:ok') {
									this.$refs.paymentSuccessShow.show = true
								} else {
									this.$tools.toast('支付失败')
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages_user/my_appointment/my_appointment'
										})
									}, 1000)
								}
							})
						})
						// #endif
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			confirm() {
				this.$refs.paymentSuccessShow.show = false
				uni.switchTab({
					url: '../userCenter/userCenter'
				})
			},
			openMap() {
				console.log('111')
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.address = res.address
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.getDistance()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.cell {
		padding: 0 30upx;
		background: #ffffff;

		.item:not(:last-child) {
			border-bottom: 1upx solid #efefef;
		}
		
		

		.item {
			padding: 48upx 0;
			@include flex-between;

			.title {
				font-size: 28upx;
				font-weight: bold;
				line-height: 1;
				color: #999999;
				white-space: nowrap;
				padding-right: 30upx;
			}

			.name {
				font-size: 30upx;
				font-weight: bold;
				line-height: 1;
				color: #141414;
			}
		}
	}

	.pic-list {
		border-top: 16upx solid #f5f5f5;
		padding: 0 30upx 1upx;
		background: #fff;

		.title {
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin: 40upx 0 30upx;
		}

		.list {
			@include menu-list(3);
			flex-wrap: wrap;

			.item {
				margin-bottom: 15upx;
			}
		}

		video {
			width: 690upx;
			height: 406upx;
			border-radius: 8upx;
		}

		.n-btn-primary {
			margin: 50upx auto 60upx;
		}
	}


	.info {
		padding: 0 30upx;
		background: #fff;

		.order-status {
			@include flex-between;
			padding: 30upx 0;
			border-bottom: 1upx solid #EFEFEF;
			line-height: 1;

			.title-1 {
				font-size: 26upx;
				font-weight: bold;
				color: #333333;
			}

			.desc {
				font-size: 30upx;
				line-height: 45upx;
				color: #333333;
				margin-top: 20upx;
			}

			.mobile {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
			}
		}



		.car-info {
			padding: 30upx 0;
			
			.item {
				@include flex-between;

				.title {
					font-size: 30upx;
					line-height: 60upx;
					color: #999999;
					white-space: nowrap;
				}

				.text {
					padding-left: 30upx;
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
				}
			}
			.textarea{
				background: #f5f5f5;
				border-radius: 10upx;
				padding: 10upx 30upx;
			}
			.item-1{
				align-items: flex-start !important;
			}
		}

	}

	.comment {
		margin-top: 16upx;
		padding: 40upx 30upx;
		background: #fff;

		.user-info {
			@include flex;

			.name {
				font-size: 32upx;
				font-weight: 500;
				color: #333333;
				margin-left: 20upx;
				flex: 1;
			}

			.text {
				font-size: 18upx;
				color: #999999;
				margin-left: 8upx;
			}

			image {
				margin-left: 60upx;
			}
		}

		.title-1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			margin: 0 0 30upx;
			@include flex-between;
		}

		.badge {
			@include flex;
			flex-wrap: wrap;
			margin-bottom: 20upx;

			.item {
				text-align: center;
				min-width: 205upx;
				line-height: 48upx;
				background: #EDF5F1;
				border-radius: 24upx;
				font-size: 26upx;
				color: #519D76;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
		}

		.list {
			padding-bottom: 100upx;

			.item {
				display: flex;
				border-bottom: 1upx solid #EFEFEF;
				padding-bottom: 40upx;
				margin-bottom: 40upx;

				.name {
					font-size: 30upx;
					color: #7B7B7B;
				}

				.desc {
					font-size: 30upx;
					line-height: 45upx;
					color: #333333;
				}
			}
		}
	}

	.payment {
		background: #fff;
		padding: 0 30upx 120upx;
		margin-top: 16upx;

		.title-1 {
			font-size: 28upx;
			font-weight: bold;
			color: #519D76;
			padding: 40upx 0;
		}

		.cell {
			padding: 34upx 0;
			border-top: 1upx solid #EFEFEF;
			@include flex-between;

			.text-1 {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
				padding-left: 20upx;
			}
		}
	}

	.btn-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 20upx 30upx;
		@include flex;
		justify-content: flex-end;
		border-top: 1upx solid #f5f5f5;

		.text-1 {
			font-size: 28upx;
			font-weight: bold;
			color: #999999;
			margin-right: 40upx;

			text {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;
				margin-left: 10upx;
			}
		}

		.btn {
			text-align: center;
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			width: 300upx;
			line-height: 80upx;
			background: #519D76;
			border-radius: 40upx;
		}
	}

	.order-info {
		background: #fff;
		margin-top: 16upx;

		.title-1 {
			font-size: 26upx;
			font-weight: bold;
			color: #333333;
			padding: 40upx 0 30upx;
		}

		image {
			width: 447upx;
			display: block;
			margin: 0 auto;
		}

		.cell:not(:first-child) {
			border-top: 1upx solid #EFEFEF;
		}

		.cell {
			padding: 40upx 0;
			@include flex-between;

			.text-1 {
				font-size: 28upx;
				font-weight: bold;
				color: #999999;
			}

			.text-2 {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
				@include flex;
			}
		}
	}
</style>
